<template>
  <div>
    <el-form ref="dataAddForm" :model="consignee" label-width="80px" :rules="rules" >
      <el-row>
        <el-col :span="12">
        <el-form-item label="收货人名称" label-width="100px" >
          <el-input v-model="consignee.name" id="n1"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="100px" >
          <el-input v-model="consignee.phone" id="p1"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-form-item label="收货人地址" label-width="100px">
        <el-select
            v-model="consignee.province"
            placeholder="省级地区">
          <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select
            v-model="consignee.city"
            placeholder="市级地区">
          <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select
            v-model="consignee.county"
            placeholder="区级地区">
          <el-option
              v-for="item in countyList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="Returns">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "ConsigneeSaveOrEdit",
  data() {
    return {
        rules: {//校验规则
            name: [{ required: true, message: '为必填项', trigger: 'blur' }],
            phone: [{ required: true, min:11,max:11,message: '必须为数字，且长度为11', trigger: 'blur' }]
        },
      id: 0,
      consignee: {
        province:'',
        city:'',
        county:''
      },
      provinceList:[],
      cityList:[],
      countyList:[],
    }
  },
  methods: {
      onSubmit () {
          this.$refs['dataAddForm'].validate((valid) => {
              if(valid){
                  //添加或者修改
                  var p = null;
                  if (this.id == 0) {
                      p = axios.post("http://127.0.0.1:8181/consignee/addConsignee", this.consignee)
                  } else {
                      p = axios.post("http://127.0.0.1:8181/consignee/upConsignee", this.consignee)
                  }
                  p.then(res => {
                          this.$router.push({path:'/ConsigneeList'})
                          if (res.data) {
                              this.$message({
                                  message: '操作成功',
                                  type:'success'
                              });
                          }
                  })
              }else{
                  //表单校验不通过
                  this.$message.error("表单数据校验失败!");
                  return false;
              }
          });
      },
    findById() {
      axios.get(`http://127.0.0.1:8181/consignee/findById/${this.id}`).then(res => {
        this.consignee = res.data;
      })
    },
   /* onSubmit() {
      //添加或者修改
      var p = null;
      if (this.id == 0) {
        p = axios.post("http://127.0.0.1:8181/consignee/addConsignee", this.consignee)
      } else {
        p = axios.post("http://127.0.0.1:8181/consignee/upConsignee", this.consignee)
      }
      p.then(res => {
        this.$router.push({path:'/ConsigneeList'})
        if (res.data) {
          this.$message({
            message: '操作成功',
            type:'success'
          });
        }
      })
    },*/
    getProvinceData(){
      axios.get("http://localhost:8181/consignee/findPCC/0").then(res=>{
        this.provinceList = res.data;
      })
    },
    getCityData(id){
      axios.get(`http://localhost:8181/consignee/findPCC/${id}`).then(res=>{
        this.cityList = res.data;
      })
    },
    getCountyData(id){
      axios.get(`http://localhost:8181/consignee/findPCC/${id}`).then(res=>{
        this.countyList = res.data;
      })
    },
    Returns(){
      this.$router.push({path:'/ConsigneeList'})
    }
  },
  mounted() {
    this.getProvinceData();
    // 查询下拉框 三级联动
    this.id = this.$route.params.id;
    if (this.id == undefined) {
      this.id = 0;
    } else {
      this.findById();
    }
  },
  watch:{
    'consignee.province'(id){
      this.getCityData(id);
      this.cityList = [];
      this.countyList = [];
      // this.consignee.city = '';
      // this.consignee.county = '';
    },
    'consignee.city'(id){
      this.getCountyData(id);
      this.countyList = [];
      // this.consignee.county = '';
    }
  }
}
</script>

<style scoped>

</style>
